<template>
  <view class="box-bg">
    <uni-nav-bar 
      shadow 
      color="#F7F7F7" 
      left-icon="left" 
      backgroundColor="#3485FD" 
      height="65px" 
      title="汽车保养" 
      @clickLeft="back" 
    />
  </view>
  <view>
    <view class="box" v-for="item in daizhifu" :key="item.id" style="width: 94%;">
      <view class="list">
        <view class="title">
          <view class="left">
            <text>服务评价</text>
          </view>
        </view>
        <view class="container">
          <view class="container-left">
            <image src="@/static/IDEA5.png" mode="scaleToFill" />
          </view>
          <view class="container-right">
            <text class="service-name">车百事汽车生活馆</text>
            <view class="star-rating">
              <uni-rate allow-half :value="value" size="30"/>
            </view>
          </view>
        </view>
        <view class="feedback">
          <text>评语(0-299字)</text>
          <textarea 
            class="textarea" 
            placeholder="请留下您宝贵的意见和建议......" 
            v-model="comment"
          ></textarea>
        </view>

        <view class="photo-upload">
          <text>照片（选填）</text>
          <view class="example-body">
          		<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
          </view>
        </view>
        <view class="submit-button">
          <button type="primary" @click="submitEvaluation">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 响应式数据
const fileList1 = ref([]);
const value = ref(2);
const comment = ref('');
const daizhifu = ref([
  {
    id: 1,
    ordernum: "2546554125",
    type: "车辆保养",
    name: "大宝汽车维修店",
    time: "2020-1-1 12:11",
    price: "￥100",
    state: "待支付",
    btn1: "取消订单",
    btn2: "立即支付",
  },
]);
const imageStyles = ref({
  width: 64,
  height: 64,
  border: {
    radius: '50%'
  }
});

const listStyles = ref({
  border: true,
  dividline: true,
  borderStyle: {
    width: 1,
    color: 'blue',
    style: 'dashed',
    radius: 2
  }
});

const fileLists = ref([
  {
    url: '',
    extname: '',
    name: ''
  }
]);
// 返回上一页
const back = () => {
  uni.navigateBack();
};

// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  const lists = Array.isArray(event.file) ? event.file : [event.file];
  const targetFileList = fileList1.value;
  const initialLength = targetFileList.length;

  lists.forEach((item) => {
    targetFileList.push({ ...item, status: "uploading", message: "上传中" });
  });

  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    const itemToUpdate = targetFileList[initialLength + i];
    targetFileList.splice(
      initialLength + i,
      1,
      { ...itemToUpdate, status: "success", message: "", url: result }
    );
  }
};

// 上传文件 Promise
const uploadFilePromise = (url) => {
  return new Promise((resolve) => {
    uni.uploadFile({
      url: "http://192.168.2.21:7001/upload", // 实际接口地址
      filePath: url,
      name: "file",
      formData: { user: "test" },
      success: (res) => {
        setTimeout(() => {
          resolve(JSON.parse(res.data).data); // 假设返回JSON格式数据
        }, 1000);
      },
    });
  });
};

// 提交评价
const submitEvaluation = () => {
  if (!comment.value) {
    uniShowToast({ title: '请填写评语', icon: 'none' });
    return;
  }

  // 模拟提交逻辑
  uniShowToast({
    title: '评价提交成功',
    icon: 'success',
    duration: 2000,
    complete: () => {
      setTimeout(() => {
        uniNavigateBack(); // 提交后返回上一页
      }, 1500);
    }
  });
};
</script>

<style scoped>
	.box-bg{
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 1000;
		}
		.example-body {
				padding: 10px;
				padding-top: 0;
			}
.box {
  position: absolute;
  top: 70px;
  width: 100%;
  height: 100%;
  font-size: 30rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-left: 3%;
}
.content {
  background-color: #f5f5f5;
  overflow: scroll;
  position: relative;
  margin: 30rpx;
  border-radius: 30rpx;
}
.list {
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.title {
  height: 80rpx;
  font-size: 36rpx;
  border-bottom: 3px solid #f5f5f5;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.title .left {
  width: 180rpx;
  height: 100rpx;
  text-align: center;
  font-size: 40rpx;
  line-height: 70rpx;
}

.left {
  font-size: 28rpx;
  color: #333;
}

.container {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.container-left {
  margin-right: 20rpx;
}
.container-left image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  overflow: hidden;
  padding: 10rpx;
}
.container-right {
  flex: 1;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.service-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 540;
}
.star-rating {
  font-size: 32rpx;
}

.feedback {
  margin-bottom: 20rpx;
}
.feedback text {
  font-size: 36rpx;
  color: #333;
  margin: 30rpx 10rpx;
  display: block;
  line-height: 50rpx;
  font-weight: 550;
}

.textarea {
  width: 94%;
  height: 200rpx;
  border: 1px solid #ddd;
  border-radius: 30rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  resize: none;
}

.photo-upload {
  margin-bottom: 40rpx;
}
.photo-upload text {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx;
  height: 50rpx;
  display: inline-block;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.upload-box {
  padding: 20rpx;
  border: 1px solid #000;

  width: 120rpx;
  height: 120rpx;
  border: 1px dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.upload-button {
  font-size: 32rpx;
  color: #999;
}

.submit-button {
  text-align: center;
}

.submit-button button {
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  border: none;
  outline: none;
}
</style>